---
id: editable
title: Editable
description: A component that allows users to edit text in place.
---

<ComponentPreview id="Editable" />

## Anatomy

To set up the editable correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="editable" />

## Examples

Learn how to use the `Editable` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Custom controls

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to
provide access to the internal state of the component.

<Example id="custom-controls" />

### Field

The `Field` component helps manage form-related state and accessibility attributes of an editable. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Root Provider

Use the `useEditable` hook to create the editable store and pass it to the `Editable.RootProvider` component. This
allows you to have maximum control over the editable programmatically.

<Example id="root-provider" />

> If you're using the `Editable.RootProvider` component, you don't need to use the `Editable.Root` component.

## Guides

### Auto-resizing

To auto-grow the editable as the content changes, set the `autoResize` prop to `true`.

```tsx
<Editable.Root placeholder="Placeholder" autoResize>
  {/*...*/}
</Editable.Root>
```

### Max Length

Use the `maxLength` prop to set a maximum number of characters that can be entered into the editable.

```tsx
<Editable.Root placeholder="Placeholder" autoResize maxLength={10}>
  {/*...*/}
</Editable.Root>
```

### Double click activation

The editable supports two modes of activating the "edit" state:

- when the preview part is focused (with pointer or keyboard).
- when the preview part is double-clicked.

To change the mode to double-click, pass the prop `activationMode="dblclick"`.

```tsx
<Editable.Root placeholder="Placeholder" activationMode="dblclick">
  {/*...*/}
</Editable.Root>
```

## API Reference

### Props

<ComponentTypes id="editable" />

### Context

These are the properties available when using `Editable.Context`, `useEditableContext` hook or `useEditable` hook.

<ContextType id="editable" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="editable" />
